<template>
	<view class="container">
		<!-- 预览状态 -->
		<view v-if="!isEditing" class="preview">
			<p><span>姓名:</span> {{ userName }}</p>
			<p><span>学校:</span> {{ school }}</p>
			<p><span>学号:</span> {{ studentId }}</p>
			<button @click="startEditing">修改</button>
		</view>
		<!-- 修改状态 -->
		<view v-else class="form">
			<view class="form-item">
				<label>姓名:</label>
				<input v-model="tempName" type="text" placeholder="请输入姓名" />
				<text v-if="nameError" class="error-tip">{{ nameError }}</text>
			</view>
			<view class="form-item">
				<label>学校:</label>
				<input v-model="tempSchool" type="text" placeholder="请输入学校" />
				<text v-if="schoolError" class="error-tip">{{ schoolError }}</text>
			</view>
			<view class="form-item">
				<label>学号:</label>
				<input v-model="tempStudentId" type="text" placeholder="请输入学号" />
				<text v-if="studentIdError" class="error-tip">{{ studentIdError }}</text>
			</view>
			<button @click="submitUpdate">确认修改</button>
			<button @click="cancelUpdate">取消</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		queryInformation
	} from '../../request/api.js'; // 假设这是更新用户信息的 API 函数
	import {
		useUserStore
	} from '../../stores/user.js'
	const userName = ref('');
	const school = ref('');
	const studentId = ref('');
	const tempName = ref('');
	const tempSchool = ref('');
	const tempStudentId = ref('');
	const nameError = ref('');
	const schoolError = ref('');
	const studentIdError = ref('');
	const isEditing = ref(false);

	// 模拟从服务器获取初始个人信息
	const fetchUserInfo = () => {
		const userStore = useUserStore();
		const {
			name,
			school_name,
			student_id
		} = userStore
		userName.value = name;
		school.value = school_name;
		studentId.value = student_id;
		// 初始化临时变量
		tempName.value = name;
		tempSchool.value = school_name;
		tempStudentId.value = student_id;
	};

	// 开始编辑
	const startEditing = () => {
		isEditing.value = true;
	};

	// 提交更新
	const submitUpdate = async () => {
		// 清空错误信息
		nameError.value = '';
		schoolError.value = '';
		studentIdError.value = '';

		// 验证输入是否为空
		if (!tempName.value) {
			nameError.value = '姓名不能为空';
			return;
		}
		if (!tempSchool.value) {
			schoolError.value = '学校不能为空';
			return;
		}
		if (!tempStudentId.value) {
			studentIdError.value = '学号不能为空';
			return;
		}

		try {
			const res = await queryInformation({
				name: tempName.value,
				school: tempSchool.value,
				studentId: tempStudentId.value
			});
			if (res.success) {
				uni.showToast({
					title: '个人信息更新成功',
					icon: 'success'
				});
				// 更新预览信息
				name.value = tempName.value;
				school.value = tempSchool.value;
				studentId.value = tempStudentId.value;
				// 退出编辑状态
				isEditing.value = false;
			} else {
				uni.showToast({
					title: '个人信息更新失败，请重试',
					icon: 'none'
				});
			}
		} catch (error) {
			uni.showToast({
				title: '网络错误，请稍后重试',
				icon: 'none'
			});
		}
	};

	// 取消更新
	const cancelUpdate = () => {
		// 恢复临时变量为原信息
		tempName.value = userName.value;
		tempSchool.value = school.value;
		tempStudentId.value = studentId.value;
		// 清空错误信息
		nameError.value = '';
		schoolError.value = '';
		studentIdError.value = '';
		// 退出编辑状态
		isEditing.value = false;
	};

	// 页面加载时获取初始信息
	fetchUserInfo();
</script>

<style scoped>
	.container {
		padding: 24px;
		background: #ffffff;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		max-width: 500px;
		margin: 20px auto;
	}

	/* 预览状态 */
	.preview p {
		margin-bottom: 16px;
		font-size: 16px;
		color: #333;
		display: flex;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #eee;
	}

	.preview span {
		font-weight: 600;
		color: #2c3e50;
		min-width: 60px;
		margin-right: 20px;
	}

	.preview button {
		background: linear-gradient(135deg, #007aff, #0063cc);
		border-radius: 8px;
		margin-top: 20px;
		transition: all 0.3s;
		box-shadow: 0 2px 4px rgba(0, 122, 255, 0.2);
	}

	.preview button:active {
		transform: scale(0.98);
	}

	/* 表单状态 */
	.form {
		margin-top: 24px;
	}

	.form-item {
		margin-bottom: 24px;
		position: relative;
	}

	.form-item label {
		display: block;
		margin-bottom: 8px;
		font-weight: 500;
		color: #34495e;
		font-size: 14px;
	}

	.form-item input {
		width: 100%;
		padding: 12px;
		border: 2px solid #e0e0e0;
		border-radius: 8px;
		font-size: 14px;
		transition: border-color 0.3s;
	}

	.form-item input:focus {
		border-color: #007aff;
		outline: none;
		box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
	}

	.error-tip {
		color: #ff4757;
		font-size: 12px;
		margin-top: 6px;
		display: block;
		padding: 4px 8px;
		background: #ffecee;
		border-radius: 4px;
		border-left: 3px solid #ff4757;
	}

	/* 按钮组 */
	button {
		width: 100%;
		padding: 14px;
		border-radius: 8px;
		font-weight: 500;
		transition: all 0.3s;
		margin-bottom: 12px;
	}

	button[type="primary"] {
		background: linear-gradient(135deg, #007aff, #0063cc);
		color: white;
		border: none;
	}

	button[type="secondary"] {
		background: white;
		color: #007aff;
		border: 2px solid #007aff;
	}

	button:active {
		opacity: 0.9;
	}

	/* 修改确认/取消按钮样式 */
	.submit-btn {
		background: linear-gradient(135deg, #34c759, #28a745);
		box-shadow: 0 2px 4px rgba(52, 199, 89, 0.2);
	}

	.cancel-btn {
		background: linear-gradient(135deg, #ff3b30, #d70015);
		box-shadow: 0 2px 4px rgba(255, 59, 48, 0.2);
	}

</style>